<template>
	<view>
		<view class="nav_topBox">
			<view
				class="nav_content"
				v-for="item in topList"
				:key="item.id"
				@tap="tabNav(item.id)"
			>
				<text :class="{ active_btm: item.done }">
					{{ item.name }}
				</text>
			</view>
		</view>
		<!-- 基金热门 -->
		<view v-if="topList[0].done">
			<view
				class="content_list"
				style="margin-bottom: 24rpx;"
				v-for="item in fundHotList"
				:key="item.fundCode"
				@tap="jumpBtn(item.fundCode)"
			>
				<view class="content_flexA">
					<view class="ct_a">
						<text class="tx_a">{{ item.name }}</text>
						<text class="tx_b">{{ item.risk }}</text>
					</view>
					<view class="ct_b">
						<text class="tx_c">{{ item.yearUp }}</text>
						<text class="tx_d">近一年涨跌幅</text>
					</view>
					<view class="ct_c">
						<text class="tx_e">
							{{ item.minPurchase }}
						</text>
						<text class="tx_f">起购金额(元)</text>
					</view>
				</view>
				<view class="line_box">
					<u-line-progress
						class="line_a"
						:round="true"
						:show-percent="false"
						height="16"
						active-color="#3A6AF6"
						:percent="
							parseInt(item.sold) / parseInt(item.quota)
						"
					></u-line-progress>
				</view>
				<view class="btm_box">
					<view>
						<text>{{ item.quota }}</text>
					</view>
					<view>
						<text>
							{{
								parseInt(item.sold) /
									parseInt(item.quota)
							}}%
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 基金排行 -->
		<view v-if="topList[1].done">
			<view
				class="content_list"
				style="margin-bottom: 24rpx;"
				v-for="item in fundHotList"
				@tap="jumpBtn(item.fundCode)"
				:key="item.fundCode"
			>
				<view class="content_flexA">
					<view class="ct_a">
						<text class="tx_a">{{ item.name }}</text>
						<text class="tx_b">{{ item.risk }}</text>
					</view>
					<view class="ct_b">
						<text class="tx_c">{{ item.yearUp }}</text>
						<text class="tx_d">近一年涨跌幅</text>
					</view>
					<view class="ct_c">
						<text class="tx_e">
							{{ item.minPurchase }}
						</text>
						<text class="tx_f">起购金额(元)</text>
					</view>
				</view>
				<view class="line_box">
					<u-line-progress
						class="line_a"
						:round="true"
						:show-percent="false"
						height="16"
						active-color="#3A6AF6"
						:percent="
							parseInt(item.sold) / parseInt(item.quota)
						"
					></u-line-progress>
				</view>
				<view class="btm_box">
					<view>
						<text>{{ item.quota }}</text>
					</view>
					<view>
						<text>
							{{
								parseInt(item.sold) /
									parseInt(item.quota)
							}}%
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 基金指数 -->
		<view v-if="topList[2].done">
			<view
				class="content_list"
				style="margin-bottom: 24rpx;"
				v-for="item in fundHotList"
				:key="item.fundCode"
				@tap="jumpBtn(item.fundCode)"
			>
				<view class="content_flexA">
					<view class="ct_a">
						<text class="tx_a">{{ item.name }}</text>
						<text class="tx_b">{{ item.risk }}</text>
					</view>
					<view class="ct_b">
						<text class="tx_c">{{ item.yearUp }}</text>
						<text class="tx_d">近一年涨跌幅</text>
					</view>
					<view class="ct_c">
						<text class="tx_e">
							{{ item.minPurchase }}
						</text>
						<text class="tx_f">起购金额(元)</text>
					</view>
				</view>
				<view class="line_box">
					<u-line-progress
						class="line_a"
						:round="true"
						:show-percent="false"
						height="16"
						active-color="#3A6AF6"
						:percent="
							parseInt(item.sold) / parseInt(item.quota)
						"
					></u-line-progress>
				</view>
				<view class="btm_box">
					<view>
						<text>{{ item.quota }}</text>
					</view>
					<view>
						<text>
							{{
								parseInt(item.sold) /
									parseInt(item.quota)
							}}%
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btm_text">
			<text>暂无更多，去别处逛逛？</text>
		</view>
	</view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
let { mapState, mapActions, mapMutations } = createNamespacedHelpers(
	'manager'
);
export default {
	data() {
		return {
			topList: [
				{ id: 1, name: '人气热销', done: true },
				{ id: 2, name: '基金排行', done: false },
				{ id: 3, name: '指数选基', done: false },
			],
		};
	},
	onLoad() {
		this.getFundHot();
		// this.getFundRank();
		// this.getFundExp();
	},
	computed: {
		...mapState(['fundHotList']),
	},
	methods: {
		...mapActions(['getFundHot']),
		...mapMutations(['setType']),
		tabNav(id) {
			this.topList.map(item => {
				if (item.id == id) {
					item.done = !item.done;
				} else {
					item.done = false;
				}
			});
			// 切换调用
			console.log(id);
			switch (id) {
				case 1:
					this.setType('hot');
					this.getFundHot();
					break;
				case 2:
					this.setType('rank');
					this.getFundHot();
					break;
				case 3:
					this.setType('exponent');
					this.getFundHot();
					break;
			}
		},

		//页面跳转
		jumpBtn(code) {
			uni.navigateTo({
				url: '../details_Btwo/details_Btwo?fundCode=' + code,
			});
		},
	},
};
</script>

<style lang="scss">
@import 'css/fund_Bone.scss';
</style>
